<template>
  <nav
    class=" dark:bg-gray-900 shadow-sm transition-colors duration-300"
  >
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-14 sm:h-16">
        <!-- Logo部分 -->
        <NuxtLink
          to="/"
          class="text-lg sm:text-xl font-semibold text-primary-dark dark:text-gray-100 flex items-center hover:opacity-80 transition-opacity"
        >
          <p class="hidden sm:inline">FlanChanBlog</p>
          <p class="sm:hidden">FlanChan</p>
        </NuxtLink>

        <!-- 桌面导航 -->
        <div class="hidden md:flex items-center space-x-1 lg:space-x-2">
          <template v-for="link in navLinks" :key="link.title">
            <!-- 有 children 时渲染 Popver -->
            <Popver v-if="link.children" class="flex">
              <template #reference>
                <button
                  class="px-2 sm:px-3 cursor-pointer py-2 rounded-md text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300 transition-all flex items-center text-sm sm:text-base"
                >
                  <component
                    :is="getIconComponent(link.icon)"
                    class="w-4 h-4 sm:w-5 sm:h-5 mr-1 sm:mr-1.5"
                  />
                  {{ link.title }}
                </button>
              </template>
              <!-- 弹出层内容使用 link.children -->
              <div class="w-[170px]">
                <div class="cursor-pointer rounded flex flex-col">
                  <NuxtLink
                    v-for="child in link.children"
                    :key="child.path"
                    :to="child.path"
                    class="flex p-2 sm:p-3 items-center hover:bg-zinc-100/60 dark:hover:bg-zinc-800 transition-colors"
                  >
                    <span
                      class="text-zinc-900 dark:text-zinc-300 text-xs sm:text-sm"
                    >
                      {{ child.title }}
                    </span>
                    <span
                      v-if="child.badge"
                      class="ml-auto text-xs text-primary-dark dark:text-primary-light font-medium"
                    >
                      {{ child.badge }}
                    </span>
                  </NuxtLink>
                </div>
              </div>
            </Popver>
            <!-- ThemeToggle 组件 -->
            <ThemeToggle v-else-if="link.component === 'ThemeToggle' || link.themeSwitch" />
            <!-- 普通导航项 -->
            <NuxtLink
              v-else
              :to="link.path"
              class="px-2 sm:px-3 cursor-pointer py-2 rounded-md text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300 transition-all flex items-center text-sm sm:text-base"
            >
              <component
                :is="getIconComponent(link.icon)"
                class="w-4 h-4 sm:w-5 sm:h-5 mr-1 sm:mr-1.5"
              />
              {{ link.title }}
            </NuxtLink>
          </template>
        </div>

        <!-- 移动菜单按钮 -->
        <button
          @click="$emit('toggleMobileMenu')"
          class="md:hidden p-2 rounded-md text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors"
          aria-label="Toggle menu"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              v-if="!isMobileMenuOpen"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            />
            <path
              v-else
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单内容 -->
    <Transition
      enter-active-class="transition duration-200 ease-out"
      enter-from-class="transform scale-95 opacity-0"
      enter-to-class="transform scale-100 opacity-100"
      leave-active-class="transition duration-150 ease-in"
      leave-from-class="transform scale-100 opacity-100"
      leave-to-class="transform scale-95 opacity-0"
    >
      <div
        v-show="isMobileMenuOpen"
        class="md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700"
      >
        <div class="px-2 pt-2 pb-3 space-y-1">
          <template v-for="link in navLinks" :key="link.title">
            <!-- 有子菜单的导航项 -->
            <div v-if="link.children" class="space-y-1">
              <button
                @click="toggleMobileSubmenu(link.title)"
                class="w-full px-3 py-2 text-base font-medium text-gray-900 dark:text-gray-100 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors"
              >
                <div class="flex items-center">
                  <component :is="getIconComponent(link.icon)" class="w-5 h-5 mr-2" />
                  {{ link.title }}
                </div>
                <svg
                  class="w-5 h-5 transition-transform duration-200"
                  :class="{
                    'rotate-180': !isMobileSubmenuCollapsed(link.title),
                  }"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>
              <Transition
                enter-active-class="transition duration-200 ease-out"
                enter-from-class="transform -translate-y-2 opacity-0"
                enter-to-class="transform translate-y-0 opacity-100"
                leave-active-class="transition duration-150 ease-in"
                leave-from-class="transform translate-y-0 opacity-100"
                leave-to-class="transform -translate-y-2 opacity-0"
              >
                <div
                  v-show="!isMobileSubmenuCollapsed(link.title)"
                  class="pl-4 space-y-1"
                >
                  <NuxtLink
                    v-for="child in link.children"
                    :key="child.path"
                    :to="child.path"
                    class="block px-3 py-2 rounded-md text-base text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700"
                  >
                    <div class="flex items-center justify-between">
                      <span>{{ child.title }}</span>
                      <span
                        v-if="child.badge"
                        class="ml-2 text-xs text-primary-dark dark:text-primary-light"
                      >
                        {{ child.badge }}
                      </span>
                    </div>
                  </NuxtLink>
                </div>
              </Transition>
            </div>
            <!-- 主题切换组件 -->
            <div v-else-if="link.component === 'ThemeToggle' || link.themeSwitch" class="px-3 py-2">
              <ThemeToggle />
            </div>
            <!-- 没有子菜单的导航项 -->
            <NuxtLink
              v-else
              :to="link.path"
              class="block px-3 py-2 rounded-md text-base text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700"
            >
              <div class="flex items-center">
                <component :is="getIconComponent(link.icon)" class="w-5 h-5 mr-2" />
                {{ link.title }}
              </div>
            </NuxtLink>
          </template>
        </div>
      </div>
    </Transition>
  </nav>
</template>

<script lang="ts" setup>
import type { NavLinkType } from '../server/api/getNavigation';
const { data: navLinks } = await useFetch<NavLinkType[]>("/api/getNavigation");
import ThemeToggle from "../components/ThemeToggle.vue";
import {
  HomeIcon,
  BookOpenIcon,
  UserCircleIcon,
  CodeBracketIcon,
  RssIcon,
  SunIcon,
  MoonIcon,
} from "@heroicons/vue/24/outline";

defineProps<{
  isMobileMenuOpen: boolean;
}>();

defineEmits<{
  (e: "toggleMobileMenu"): void;
}>();

// 移动端子菜单折叠状态管理
const mobileSubmenuCollapsed = ref(new Set<string>());

// 初始化时设置所有子菜单的展开/折叠状态
onMounted(() => {
  // 默认折叠所有子菜单
  navLinks.value?.forEach((link: NavLinkType) => {
    if (link.children) {
      mobileSubmenuCollapsed.value.add(link.title);
    }
  });
});

const toggleMobileSubmenu = (title: string) => {
  if (mobileSubmenuCollapsed.value.has(title)) {
    mobileSubmenuCollapsed.value.delete(title);
  } else {
    mobileSubmenuCollapsed.value.add(title);
  }
};

const isMobileSubmenuCollapsed = (title: string) => {
  return mobileSubmenuCollapsed.value.has(title);
};

// 添加图标映射函数
const getIconComponent = (iconName: any) => {
  // 如果iconName已经是一个组件，则直接返回
  if (typeof iconName !== 'string') {
    return iconName;
  }
  
  // 否则，根据字符串名称返回对应的图标组件
  const iconMap: Record<string, any> = {
    home: HomeIcon,
    book: BookOpenIcon,
    user: UserCircleIcon,
    code: CodeBracketIcon,
    rss: RssIcon,
    sun: SunIcon,
    moon: MoonIcon,
    theme: SunIcon,
  };
  return iconMap[iconName] || HomeIcon; // 默认返回 HomeIcon
};
</script>

<style scoped>
.router-link-active {
  @apply bg-gray-100 dark:bg-gray-800;
}
</style>
